/* eslint-disable vue/html-indent */
<template>
  <div>
    <div>
      <div>
        <div style="margin-left: 20px;">
          {{ $t('lang.helloWorld.labelTitle') }}
          <DxButton
            :text= "$t('lang.helloWorld.buttonLanguage')"
            type="success"
            style="margin-right:10px;"
            class="rms-button-green"
            @click="toggleLang"
          />
          <DxButton
            :width="140"
            text="跳转Second页面"
            type="success"
            styling-mode="outlined"
            @click="linkBtnClick"
          />
        </div>
      </div>
      <div class="dx-fieldset">
        <div class="dx-field">
          <div class="dx-field-label">{{ $t('lang.helloWorld.labelName') }}</div>
          <div class="dx-field-value">
            <DxTextBox
              :show-clear-button="true"
              :value="$t('lang.helloWorld.textTrueName')"
            />
          </div>
        </div>
        <div class="dx-field">
          <div class="dx-field-label">{{ $t('lang.helloWorld.labelAge') }}</div>
          <div class="dx-field-value">
            <DxTextBox
              :show-clear-button="true"
              v-model="age"
            />
          </div>
        </div>
        <div class="dx-field">
          <div class="dx-field-label">{{ $t('lang.helloWorld.labelEmail') }}</div>
          <div class="dx-field-value">
            <DxTextBox
              :show-clear-button="true"
            />
          </div>
        </div>
        <div class="dx-field">
          <div class="dx-field-label">{{ $t('lang.helloWorld.selectboxProduct') }}</div>
          <div class="dx-field-value">
            <DxSelectBox
              :data-source="comProducts"
              :value="comProducts[0]"
            />
          </div>
        </div>
      </div>
    </div>
    <DxButton
      :text= "$t('lang.helloWorld.buttonSave')"
      type="success"
      style="margin-right:10px;"
      class="rms-button-green"
      @click="saveMeg"
    />
    <DxButton
      :text= "$t('lang.helloWorld.buttonCancel')"
      type="success"
      style="margin-right:10px;"
      class="rms-button-green"
    />
    <router-view/>
  </div>
</template>

<script src="@/components/helloworld/index.js"></script>
<style>
</style>
